<template>
  <div>
    <!-- 使用vuex中的数据 -->

    <h3>这是根组件 - {{ $store.state.num }}</h3>

    <p>
      <button @click="$store.dispatch('getData')">点击触发请求数据</button>
    </p>
    <p>
      <!-- <button @click="$store.dispatch('addNum', 10)">修改num的值</button> -->
      <button @click="$store.commit('ADD_NUM', 10)">修改num的值</button>
    </p>

    <p>
      <button @click="fn">获取返回的内容</button>
    </p>

    <p>
      <!-- 这种事千万别干，不要私自去修改state中的数据，很难维护 -->
      <button @click="$store.state.num++">直接修改 state 中的数据</button>
    </p>

    <ul>
      <li v-for="item in $store.state.list" :key="item.id">
        <!-- {{ item }} -->
        <h4>{{ item.title }}</h4>
        <img :src="item.cover" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    async fn() {
      const data = await this.$store.dispatch('getData1')
      console.log(data)
    }
  }
}
</script>
